import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Star, Tag, Filter, MapPin } from 'lucide-react';
export function Climbing() {
  const featuredGear = [{
    id: 'black-diamond-momentum',
    name: 'Black Diamond Momentum Harness',
    category: 'Harnesses',
    rating: 4.7,
    price: '$59.95',
    image: 'https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'la-sportiva-solution',
    name: 'La Sportiva Solution',
    category: 'Climbing Shoes',
    rating: 4.8,
    price: '$180',
    image: 'https://images.unsplash.com/photo-1564698464045-3c5265aaef6b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'petzl-grigri',
    name: 'Petzl GriGri',
    category: 'Belay Devices',
    rating: 4.9,
    price: '$109.95',
    image: 'https://images.unsplash.com/photo-1516623380988-c7ec4ea784b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'mammut-infinity',
    name: 'Mammut Infinity 9.5mm Rope',
    category: 'Ropes',
    rating: 4.7,
    price: '$259.95',
    image: 'https://images.unsplash.com/photo-1523361456880-f248432a3538?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'black-diamond-camalot',
    name: 'Black Diamond Camalot C4',
    category: 'Trad Protection',
    rating: 4.9,
    price: '$69.95',
    image: 'https://images.unsplash.com/photo-1609607295459-a0a9d9c61d9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'petzl-meteor',
    name: 'Petzl Meteor Helmet',
    category: 'Helmets',
    rating: 4.8,
    price: '$99.95',
    image: 'https://images.unsplash.com/photo-1520045892732-304bc3ac5d8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }];
  const climbingAreas = [{
    id: 'yosemite',
    name: 'Yosemite Valley',
    location: 'California, USA',
    image: 'https://images.unsplash.com/photo-1507934589868-967d660e26b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }, {
    id: 'fontainebleau',
    name: 'Fontainebleau',
    location: 'France',
    image: 'https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }, {
    id: 'kalymnos',
    name: 'Kalymnos',
    location: 'Greece',
    image: 'https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }];
  const categories = ['Harnesses', 'Climbing Shoes', 'Ropes', 'Protection', 'Helmets', 'Chalk & Bags', 'Carabiners', 'Training'];
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative h-[60vh] flex items-center justify-center overflow-hidden">
        <img src="https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="On The Rock" className="absolute w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-earth-dark to-transparent"></div>
        <div className="container mx-auto px-4 relative z-10 text-center">
          <h1 className="font-display text-5xl md:text-7xl text-white mb-4 drop-shadow-lg">
            ON THE ROCK
          </h1>
          <p className="text-xl md:text-2xl text-sand-light mb-8 max-w-3xl mx-auto drop-shadow-md">
            Essential gear for rock climbing, bouldering, and alpine adventures
          </p>
        </div>
      </section>
      {/* Category Navigation */}
      <section className="py-8 bg-carbon-black sticky top-[73px] z-30">
        <div className="container mx-auto px-4 overflow-x-auto">
          <div className="flex space-x-4">
            {categories.map(category => <a key={category} href={`#${category.toLowerCase().replace(' ', '-')}`} className="whitespace-nowrap px-4 py-2 rounded-full bg-earth-dark hover:bg-climbing-red transition-colors">
                {category}
              </a>)}
          </div>
        </div>
      </section>
      {/* Featured Gear */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              TOP-RATED CLIMBING GEAR
            </h2>
            <div className="flex space-x-4">
              <button className="flex items-center space-x-2 px-4 py-2 border border-gray-700 rounded-md hover:border-climbing-red transition-colors">
                <Filter size={18} />
                <span>Filter</span>
              </button>
              <button className="flex items-center space-x-2 px-4 py-2 border border-gray-700 rounded-md hover:border-climbing-red transition-colors">
                <Tag size={18} />
                <span>Sort</span>
              </button>
            </div>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {featuredGear.map(item => <Link key={item.id} to={`/review/${item.id}`} className="group">
                <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                  <div className="relative h-64 overflow-hidden">
                    <img src={item.image} alt={item.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                    <div className="absolute top-0 left-0 bg-climbing-red px-3 py-1">
                      <span className="font-display text-sm">
                        {item.category}
                      </span>
                    </div>
                  </div>
                  <div className="p-6 flex flex-col flex-grow">
                    <div className="flex items-center mb-2">
                      <div className="flex text-climbing-red">
                        {[...Array(5)].map((_, i) => <Star key={i} size={16} className={i < Math.floor(item.rating) ? 'fill-climbing-red' : 'text-gray-600'} />)}
                      </div>
                      <span className="ml-2 text-gray-400">{item.rating}</span>
                    </div>
                    <h3 className="font-display text-xl mb-2 group-hover:text-climbing-red transition-colors">
                      {item.name}
                    </h3>
                    <div className="mt-auto flex justify-between items-center">
                      <span className="text-lg font-bold">{item.price}</span>
                      <span className="text-climbing-red flex items-center">
                        View Details
                        <ArrowRight size={16} className="ml-1 transition-transform group-hover:translate-x-1" />
                      </span>
                    </div>
                  </div>
                </div>
              </Link>)}
          </div>
          <div className="mt-8 text-center">
            <button className="bg-climbing-red hover:opacity-90 text-white font-display px-8 py-3 rounded transition-colors">
              VIEW ALL CLIMBING GEAR
            </button>
          </div>
        </div>
      </section>
      {/* Featured Climbing Areas */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl mb-8">
            ICONIC CLIMBING AREAS
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {climbingAreas.map(area => <div key={area.id} className="group relative h-80 overflow-hidden rounded-lg">
                <img src={area.image} alt={area.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="font-display text-2xl text-white mb-1">
                    {area.name}
                  </h3>
                  <div className="flex items-center text-gray-300 mb-4">
                    <MapPin size={16} className="mr-1" />
                    <span>{area.location}</span>
                  </div>
                  <Link to={`/climbing-areas/${area.id}`} className="inline-flex items-center text-climbing-red">
                    <span className="mr-1">Area Guide</span>
                    <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
                  </Link>
                </div>
              </div>)}
          </div>
        </div>
      </section>
      {/* Climbing Guides */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              CLIMBING GUIDES & RESOURCES
            </h2>
            <Link to="/guides" className="flex items-center text-climbing-red hover:opacity-90 transition-colors">
              <span className="mr-2 font-display">VIEW ALL GUIDES</span>
              <ArrowRight size={20} />
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Link to="/guides/climbing-shoes" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1564698464045-3c5265aaef6b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Climbing Shoes Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">14 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-climbing-red transition-colors">
                    How to Choose Climbing Shoes: Fit, Style, and Purpose
                  </h3>
                  <p className="text-gray-300">
                    Finding the right climbing shoes can dramatically improve
                    your performance on different types of rock and climbing
                    styles.
                  </p>
                </div>
              </div>
            </Link>
            <Link to="/guides/alpine-routes" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1507934589868-967d660e26b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Alpine Routes Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">20 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-climbing-red transition-colors">
                    Classic Alpine Routes for Intermediate Climbers
                  </h3>
                  <p className="text-gray-300">
                    Discover some of the most rewarding alpine climbing routes
                    suitable for intermediate climbers, with gear
                    recommendations.
                  </p>
                </div>
              </div>
            </Link>
            <Link to="/guides/trad-climbing" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1609607295459-a0a9d9c61d9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Trad Climbing Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">22 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-climbing-red transition-colors">
                    Traditional Climbing: A Beginner's Guide to Gear Placement
                  </h3>
                  <p className="text-gray-300">
                    Learn the fundamentals of traditional climbing protection,
                    from cams and nuts to proper placement techniques.
                  </p>
                </div>
              </div>
            </Link>
          </div>
        </div>
      </section>
    </div>;
}